<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="个人中心"
      ></van-nav-bar>
    </header>
    <div class="content">
      <div class="nologin" v-if="flag">
        <van-button to="/register" color="#7232dd" plain>注册</van-button>
        <van-button to="/login" color="linear-gradient(to right, #4bb0ff, #6149f6)">登录</van-button>
      </div>
      <div v-else>
<<<<<<< HEAD
        <van-skeleton title avatar :row="1" :loading="loading" avatar-size="100px">
          <!-- <van-uploader v-if="avatar === ''" :after-read="afterRead" /> -->
          <van-uploader :after-read="afterRead">
            <van-image
              round
              width="100px"
              height="100px"
              :src="avatar"
            />
          </van-uploader>
          欢迎您,
          <router-link to="/edituser" v-if="nickname === '请设置昵称'">{{ nickname }}</router-link>
          <span v-else>{{ nickname }}{{ sex === 1 ? '先生' : sex === 0 ? '女士' : ''}}</span>
          <router-link to="/edituser">
          修改信息</router-link>
        </van-skeleton>

        <van-grid>
          <van-grid-item text="未支付" />
          <van-grid-item text="待收货" />
          <van-grid-item text="待评价" />
          <van-grid-item text="全部订单" />
        </van-grid>

        <van-grid>
          <van-grid-item text="地址管理" />
          <van-grid-item text="我的足迹" />
          <van-grid-item text="收藏夹" @click="$router.push('/collection')"/>
          <van-grid-item text="关于我们" />
        </van-grid>
=======
        <div class="users-info">
          <van-skeleton title avatar :row="1" :loading="loading" avatar-size="100px">
          <div class="user-photo">
            <van-uploader :after-read="afterRead" oversize="oversize">
            <van-image
              round
              width="80px"
              height="80px"
              left="50%"
              :src="avatar"
            />
          </van-uploader>
          </div>
          <div>
            欢迎您,
            <router-link to="/edituser" v-if="nickname === '请设置昵称'">
              {{ nickname }}
            </router-link>
            <span v-else>
              {{ nickname }} {{ sex === 1 ? '先生' : sex === 0 ? '女士' : '' }}
              <router-link to="/edituser">
                修改信息
              </router-link>
            </span>
          </div>
        </van-skeleton>
        </div>

        <div class="user-order">
          <van-grid column-num="3">
          <van-grid-item text="待付款" />
          <van-grid-item text="待收货" />
          <van-grid-item text="全部订单" />
          </van-grid>
        </div>

      </div>
      <div>
        <van-cell title="我的收藏" is-link @click="$router.push('/collection')"/>
        <van-cell title="购物车历史" is-link />
        <van-cell title="浏览历史" is-link />
        <van-cell title="申请退换" is-link />
        <van-cell title="收货地址" is-link />
        <van-cell title="修改登录密码" is-link />
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
<<<<<<< HEAD
import { Button, NavBar, Skeleton, Uploader, Image, Grid, GridItem } from 'vant'
=======
import { Button, NavBar, Skeleton, Uploader, Image, Grid, GridItem, Cell } from 'vant'
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
import { getuserinfo, updateAvatar } from '@/api'
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Skeleton)
Vue.use(Uploader)
Vue.use(Image)
Vue.use(Grid)
Vue.use(GridItem)
<<<<<<< HEAD
=======
Vue.use(Cell)
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
export default {
  data () {
    return {
      flag: true,
      nickname: '',
      sex: -1,
      loading: true,
<<<<<<< HEAD
      avatar: 'https://img.yzcdn.cn/vant/sand.jpg'
    }
  },
  methods: {
    afterRead (file) {
      console.log(file.content)
=======
      avatar: 'https://m.vip.com/sw/touch-icon_48.png'
    }
  },
  methods: {
    oversize () {
      console.log('文件太大')
    },
    afterRead (file) {
      console.log(file)
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
      updateAvatar({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token'),
        avatar: file.content
      }).then(res => {
        if (res.data.code === '10119') {
          this.$router.push('/login')
        } else {
          this.avatar = file.content
        }
      })
    }
  },
  mounted () {
<<<<<<< HEAD
    // 1. 前端校验
=======
    // 1.前端校验
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
    // if (localStorage.getItem('loginState') === 'ok') {
    //   this.flag = false
    // } else {
    //   this.flag = true
    // }
    // 2.校验
    if (localStorage.getItem('userid')) {
      // 调用获取用户信息接口 --- 提交用户id和token信息至接口，接口验证token，验证通过返回用户数据，验证不通过，说明token失效，登陆失败
      getuserinfo({
        userid: localStorage.getItem('userid'),
        token: localStorage.getItem('token')
      }).then(res => {
        if (res.data.code === '10119') {
          this.flag = true
        } else {
          this.loading = false // 骨架屏消失
          this.flag = false
          this.nickname = res.data.data.nickname
          this.sex = res.data.data.sex
<<<<<<< HEAD
=======
          // this.avatar = res.data.data.avatar
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
        }
      })
    } else {
      // 未登录
      this.flag = true
    }
  }
}
</script>
<<<<<<< HEAD
=======

<style lang="scss">
.users-info {
  height: 20%;
}
.user-order {
  margin: 20px 0;
}
</style>
>>>>>>> 68b657acc83398406018ec9d69a526c64a82d2c8
